<template>
	<view>
		<!-- 轮播 -->
		<view class="lb-banner">
			<u-swiper :list="bannerC" @change="e => current = e.current" :autoplay="false" height="360rpx" radius="0">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in bannerC" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
		</view>
		<!-- main -->
		<view class="lb-main-32" style="margin-top: -24rpx; padding-top: 0;position: relative;z-index: 100;">
			<!-- 简介 -->
			<view class="lb-main-box">
				<view class="lb-title">
					兔率城市合伙人
				</view>
				<view class="lb-tip">
					<text>
						{{data.comment}}
					</text>
				</view>
			</view>

			<!-- 信息 -->
			<view class="lb-main-box">
				<view class="lb-title">
					城市合伙人信息填写
				</view>
				<view class="lb-item">
					<view class="item-left">
						姓名
					</view>
					<view class="item-right">
						<input type="text" v-model="FormData.name" placeholder="请输入姓名"
							placeholder-style="font-size: 28rpx; color: #999999;">
					</view>
				</view>
				<view class="lb-item">
					<view class="item-left">
						手机号码
					</view>
					<view class="item-right">
						<input type="number" v-model="FormData.mobile" placeholder="请输入手机号码"
							placeholder-style="font-size: 28rpx; color: #999999;">
					</view>
				</view>
				<!-- <view class="lb-item">
					<view class="item-left">
						身份证号
					</view>
					<view class="item-right">
						<input type="text" v-model="FormData.id_card" placeholder="请输入身份证号码"
							placeholder-style="font-size: 28rpx; color: #999999;">
					</view>
				</view> -->
			</view>

			<!-- 类型 -->
			<view class="lb-main-box">
				<view class="lb-title">
					城市合伙人选择
				</view>
				<view class="lb-item">
					<view class="item-left">
						合伙类型
					</view>
					<view class="item-right" @click="show = true">
						<input type="text" v-model="show_txt" placeholder="请选择类型"
							placeholder-style="font-size: 28rpx; color: #999999;" disabled="">
					</view>
				</view>
				<view class="lb-item" v-if="FormData.type == 1">
					<view class="item-left">
						所在小区名称
					</view>
					<view class="item-right">
						<input type="text" v-model="FormData.plot" placeholder="请输入所在小区名称"
							placeholder-style="font-size: 28rpx; color: #999999;">
					</view>
				</view>
				<view class="lb-item" v-if="FormData.type == 2">
					<view class="item-left">
						团队人数
					</view>
					<view class="item-right">
						<input type="number" v-model="FormData.group_num" placeholder="请输入团队人数"
							placeholder-style="font-size: 28rpx; color: #999999;">
					</view>
				</view>
				<view class="lb-item" v-if="FormData.type == 2 || FormData.type == 3">
					<view class="item-left">
						所在城市
					</view>
					<view class="item-right">
						<input type="text" v-model="FormData.city" placeholder="请输入所在城市"
							placeholder-style="font-size: 28rpx; color: #999999;">
					</view>
				</view>
				<view class="lb-item" v-if="FormData.type == 2 || FormData.type == 3">
					<view class="item-left">
						所在区域
					</view>
					<view class="item-right">
						<input type="text" v-model="FormData.region" placeholder="请输入所在区域"
							placeholder-style="font-size: 28rpx; color: #999999;">
					</view>
				</view>
				<view class="lb-item" v-if="FormData.type == 3">
					<view class="item-left">
						具体地址
					</view>
					<view class="item-right">
						<input type="text" v-model="FormData.address" placeholder="请输入具体地址"
							placeholder-style="font-size: 28rpx; color: #999999;">
					</view>
				</view>
				<view class="lb-item" v-if="FormData.type == 1">
					<view class="item-left">
						私域群/门头照片上传
					</view>
					<view class="item-right" style="justify-content: flex-start;padding-left: 24rpx;">
						<view class="r-img">
							<image
								:src="imgObj.private_group_image?imgObj.private_group_image:'/static/icon/up-btn.png'"
								@tap="uploadImage(1,'private_group_image')">
							</image>
						</view>
					</view>
				</view>
				<view class="lb-item" v-if="FormData.type == 3">
					<view class="item-left">
						门头照片上传
					</view>
					<view class="item-right" style="justify-content: flex-start;padding-left: 24rpx;">
						<view class="r-img">
							<image :src="imgObj.door_image?imgObj.door_image:'/static/icon/up-btn.png'"
								@tap="uploadImage(1,'door_image')"></image>
						</view>
					</view>
				</view>
			</view>

			<view class="lb-btn" @click="formSubmit">
				提交申请
			</view>
		</view>

		<!-- 选择类型 -->
		<u-picker :show="show" :columns="columns" keyName="name" @confirm="confirm" @cancel="cancel"
			@close="show = false"></u-picker>
	</view>
</template>

<script>
	import {
		uploadFilesApi,
		getPartnerApiInfo
	} from "@/api/apis/comm.js"
	import {
		cityPartnerApplyApi
	} from "@/api/apis/wash.js"
	import {
		userIdCard,
		mobile,
		account,
		setImgUrl
	} from "@/utils/comm.js"
	export default {
		data() {
			return {
				current: 0,
				bannerC: [],
				show: false,
				show_txt: '',
				columns: [
					[{
						id: 1,
						name: '城市生活管家'
					}, {
						id: 2,
						name: '城市服务商'
					}, {
						id: 3,
						name: '城市优选门店'
					}]
				],
				FormData: {
					type: '', //类型
					name: '', //名称
					mobile: '', //手机号
					id_card: '', //身份证号码
					plot: '', //小区名称
					private_group_image: '', //私域群/门头照片上传
					group_num: '', //团队人数
					city: '', //城市
					region: '', //区域
					address: '', //详细地址
					door_image: '', //门头照片
				},
				imgObj: {
					private_group_image: '', //私域群/门头照片上传
					door_image: '', //门头照片
				},
				data:""


			}
		},
		onLoad() {
			this.getData();
		},
		methods: {

			getData() {
				getPartnerApiInfo().then(res => {
					this.data = res.data;
					this.bannerC = [setImgUrl(res.data.bg)]
				})
			},

			//确认类型
			confirm(e) {
				this.FormData.type = e.value[0].id;
				this.show_txt = e.value[0].name;
				this.FormData.plot = '';
				this.FormData.private_group_image = '';
				this.FormData.group_num = '';
				this.FormData.city = '';
				this.FormData.region = '';
				this.FormData.address = '';
				this.FormData.door_image = '';
				this.private_group_image = '';
				this.door_image = '';
				this.show = false;
			},
			//取消
			cancel(e) {
				this.show = false;
			},


			//上传图片
			uploadImage(count, field) {
				let _this = this;
				uni.chooseImage({
					count: count, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(album) {
						album.tempFilePaths.forEach((item, index) => {
							uni.getImageInfo({
								src: item, //album.tempFilePaths[0],
								success: function(image) {
									uploadFilesApi(image.path).then(res => {
										if (res.code == 1) {
											let fullurl = res.data.fullurl;
											let url = res.data.url;
											_this.imgObj[`${field}`] = fullurl;
											_this.FormData[`${field}`] = url;
										}
										console.log(_this.imgObj)
										console.log(_this.FormData)
									});
								}
							});
						})

					}
				});
			},

			//提交
			formSubmit() {
				let _this = this;
				if (!account(this.FormData.name)) {
					this.$u.toast('请输入姓名!');
					return;
				} else if (!mobile(this.FormData.mobile)) {
					this.$u.toast('请输入正确的手机号!');
					return;
				} 
				// else if (!userIdCard(this.FormData.id_card)) {
				// 	this.$u.toast('请输入正确的身份证号!');
				// 	return;
				// }
				 else if ([1, 2, 3].indexOf(this.FormData.type) == -1) {
					this.$u.toast('请输入合伙类型!');
					return;
				} else if (this.FormData.type == 1) {
					if (!this.FormData.plot) {
						this.$u.toast('请输入所在小区名称!');
						return;
					} else if (!this.FormData.private_group_image) {
						this.$u.toast('请上传私域群/门头照片!');
						return;
					}
				} 
				 
				 if (this.FormData.type == 3) {
					if (!this.FormData.address) {
						this.$u.toast('请输入具体地址!');
						return;
					}
				} 
				 
				 if (this.FormData.type == 3) {
					if (!this.FormData.city) {
						this.$u.toast('请上传门头照片!');
						return;
					}
				} else if (this.FormData.type == 2 || this.FormData.type == 2) {
					if (!this.FormData.city) {
						this.$u.toast('请输入所在城市!');
						return;
					} else if (!this.FormData.region) {
						this.$u.toast('请输入所在区域!');
						return;
					}
				}
				uni.showLoading({
					title: "提交中",
					mask: true
				});
				cityPartnerApplyApi(this.FormData).then(res => {
					uni.hideLoading();
					_this.$u.toast('申请成功，请耐心等待审核!');
					setTimeout(() => {
						uni.navigateBack({
							delta: 2
						})
					}, 1500)
				})
			}
		}
	}
</script>

<style lang="scss">
	//广告
	.lb-banner {
		.indicator {
			@include flex(row);
			justify-content: center;
			margin-bottom: 20rpx;

			&__dot {
				height: 6px;
				width: 6px;
				border-radius: 100px;
				background-color: rgba(255, 255, 255, 0.35);
				margin: 0 5rpx;
				transition: background-color 0.3s;

				&--active {
					background-color: #FFFFFF;
				}
			}
		}
	}

	.lb-title {
		font-size: $main-font-28;
		font-weight: bold;
		color: $main-font-color;
	}

	.lb-tip {
		font-size: 24rpx;
		font-weight: 400;
		line-height: 34rpx;
		color: #666666;
		padding-top: 24rpx;
	}

	.lb-item {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 42rpx 0 24rpx 0;
		border-top: 2rpx solid #F5F5F5;

		&:nth-of-type(1) {
			border: none;
			padding-top: 10rpx;
		}

		.item-left {
			width: 200rpx;
			font-size: $main-font-28;
			color: $main-font-color;
			white-space: nowrap;

		}

		.item-right {
			width: calc(100% - 150rpx);

			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			font-size: $main-font-28;
			color: $main-font-color;

			input {
				width: 100%;
				text-align: right;
				font-size: $main-font-28;
				color: $main-font-color;
			}

			.r-img {
				width: 80rpx;
				height: 80rpx;
				// border: 4rpx solid #F5F5F5;
				border-radius: 4rpx;
			}
		}

	}

	.lb-btn {
		width: 600rpx;
		height: 88rpx;
		background: linear-gradient(135deg, #F7583F 0%, #F28F4C 100%);
		border-radius: 44rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: $main-font-28;
		color: $main-font-color-white;
		margin: 30rpx auto 50rpx;
	}
</style>